<template>
    <div class="container">
        <!-- 头部 -->
        <el-row>
            <div class="row_Left">
                <div class="line"></div>
                <div class="title">学生信息管理</div>
                <el-input placeholder="请输入学生姓名或电话" v-model="studentName" style="width: 180px;margin-right:10px;">
                </el-input>
                <el-input placeholder="请输入销售姓名" v-model="saleId" style="width: 150px;margin-right:10px;">
                </el-input>
                <el-input placeholder="请输入学校名称" v-model="major" style="width: 150px;">
                </el-input>
                <el-button type="primary" class="search" @click="goSearchStudent">
                    <el-icon style="margin-right:5px">
                        <Search />
                    </el-icon>
                    搜索
                </el-button>
            </div>
            <!-- 四个按钮 -->
            <div class="row_Right">
                <img src="../../assets/images/transferout.png" v-if="roleId == 1" title="转出学生" @click="zhuanchu">
                <img src="../../assets/images/transfer.png" title="批量转入学生" @click="zhuan2">
                <img src="../../assets/images/加号.png" @click="goAddStudent">
                <img src="../../assets/images/删除.png" @click="delall">
            </div>
        </el-row>
        <div class="content">
            <el-table :data="studentDataList" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="姓名" prop="studentName"></el-table-column>
                <el-table-column label="性别" prop="sex"></el-table-column>
                <el-table-column label="电话" prop="tel"></el-table-column>
                <el-table-column label="学校" prop="major"></el-table-column>
                <el-table-column label="销售顾问">
                    <template #default="scoped">
                        {{ scoped.row.saleName ? scoped.row.saleName : '管理员' }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remarks"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scoped">
                        <el-button link type="success" @click="goModifyStudent(scoped.row)">修改</el-button>
                        <el-button link type="danger" @click="del(scoped.row)">删除</el-button>
                        <el-button link type="primary" @click="zhuan(scoped.row)">转入</el-button>
                        <el-button link type="primary" @click="goDetails(scoped.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="myPage">
                <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageIndex"
                    :page-size="pageSize" @current-change="handleCurrentChange" />
                每页
                <el-input-number v-model="pageSize" :min="1" controls-position="right" size="large"
                    @change="handleChange" />
                条
            </div>
        </div>
        <!-- 详情抽屉 -->
        <el-drawer v-model="drawerFlag" :show-close="false" title="学生信息">
            <div class="text">
                <div>姓名：{{ studentDetailes.studentName }}</div>
                <div>性别：{{ studentDetailes.sex }}</div>
                <div>电话：{{ studentDetailes.tel }}</div>
                <div>学校和专业：{{ studentDetailes.major }}</div>
                <div>销售顾问：{{ studentDetailes.saleName }}</div>
                <div>录入时间：{{ studentDetailes.createTime }}</div>
                <div class="nodes">备注：{{ studentDetailes.remarks }}</div>
            </div>
            <div style="width:100%;display: flex;justify-content: end;">
                <el-button link @click="drawerFlag = false">关闭</el-button>
            </div>
        </el-drawer>
        <!-- 添加/修改模态框 -->
        <el-dialog v-model="operateStudentFlag" :show-close="false" :title="operateType === 0 ? '添加未报名学生' :
            operateType === 1 ? '修改未报名学生' :
                operateType === 3 ? '转入未报名学生' : ''">
            <el-form ref="myForm" v-model="studentNewsData" width:800 :rules="rules">
                <div class="row">
                    <el-form-item label="姓名" style="padding-left: 3em;">
                        <el-input placeholder="请输入学生姓名" v-model="studentNewsData.studentName"></el-input>
                    </el-form-item>
                    <el-form-item label="预开班日期" style="padding-left: 2em;">
                        <el-date-picker v-model="studentNewsData.preGraduation" type="date" placeholder="请选择预开班日期" />
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="性别" style="padding-left: 3em;">
                        <el-select placeholder="请选择性别" v-model="studentNewsData.sex">
                            <el-option value="男">男</el-option>
                            <el-option value="女">女</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预报毕业日期">
                        <el-date-picker v-model="studentNewsData.preDate" type="date" placeholder="请选择预毕业日期" />
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="电话" style="padding-left: 3em;">
                        <el-input placeholder="请选择电话" v-model="studentNewsData.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="家庭住址" style="padding-left: 4em;">
                        <el-input placeholder="请输入家庭住址" v-model="studentNewsData.address"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="学校和专业">
                        <el-input placeholder="请输入学校和专业" v-model="studentNewsData.major"
                            style="width:200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系人" style="padding-left: 5em;">
                        <el-input placeholder="请输入紧急联系人" v-model="studentNewsData.emContact"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="销售顾问" style="padding-left: 1em;">
                        <el-select label="请选择销售顾问" v-model="studentNewsData.saleId">
                            <el-option v-for="item in saleList" :key="item.userId" :value="item.userId"
                                :label="item.userName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="紧急联系人电话">
                        <el-input placeholder="请输入紧急联系人电话" v-model="studentNewsData.emTel"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="预报学科" style="padding-left: 1em;">
                        <el-select label="请选择预报学科" v-model="studentNewsData.preCourse">
                            <el-option v-for="item in subjectList" :key="item.courseId" :value="item.courseId"
                                :label="item.courseName"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="rows">
                    <el-form-item label="备注" style="padding-left: 65px;">
                        <el-input placeholder="请输入备注" v-model="studentNewsData.remarks"></el-input>
                    </el-form-item>
                </div>
                <div class="rows">
                    <el-form-item label="新增备注" style="padding-left: 36px;">
                        <el-input placeholder="请输入备注" v-model="studentNewsData.remarks2"></el-input>
                    </el-form-item>
                </div>
                <div class="rows" v-if="operateType == 0">
                    <el-form-item label="数据填充" style="padding-left: 37px;width:90%;">
                        <el-input placeholder="请输入数据（格式：姓名-性别-电话-学校和专业）"></el-input>
                    </el-form-item>
                </div>
                <div class="rowss">
                    <el-form-item>
                        <el-button type="primary" @click="operateStudentFlag = false">取消</el-button>
                        <el-button v-if="operateType == 0" type="primary" @click="sureOperate(myForm)">确定</el-button>
                        <el-button v-if="operateType == 1" type="primary" @click="sureOperate2(myForm)">确定</el-button>
                        <el-button v-if="operateType == 3" type="primary" @click="sureOperate3(myForm)">确定</el-button>
                        <el-button v-if="operateType == 0" type="primary">解析并填充</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
        <!-- 批量转入 -->
        <el-dialog v-model="operateStudentFlag2" :show-close="false" title="转为预报名学生">
            <el-form ref="myForm" v-model="studentNewsData" width:800 :rules="rules">
                <div class="row">
                    <el-form-item label="预开班日期">
                        <el-date-picker v-model="studentNewsData.preGraduation" type="date" placeholder="请选择预开班日期" />
                    </el-form-item>
                    <el-form-item label="预报毕业日期">
                        <el-date-picker v-model="studentNewsData.preDate" type="date" placeholder="请选择预毕业日期" />
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="预报学科" style="padding-left: 1em;">
                        <el-select label="请选择预报学科" v-model="studentNewsData.preCourse">
                            <el-option v-for="item in subjectList" :key="item.courseId" :value="item.courseId"
                                :label="item.courseName"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="rows">
                    <el-form-item label="备注" style="padding-left: 65px;">
                        <el-input placeholder="请输入备注" v-model="studentNewsData.remarks"></el-input>
                    </el-form-item>
                </div>
                <div class="rowss">
                    <el-form-item>
                        <el-button type="primary" @click="operateStudentFlag2 = false">取消</el-button>
                        <el-button type="primary" @click="sureOperate4(myForm)">确定</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
        <!-- 转出 -->
         <el-dialog
      v-model="operateStudentFlag3"
      title="转让学生"
      width="200px"
      :show-close="false"
      style="display: block"
    >
      <el-form :model="formDataOut" ref="formRefOut" label-width="100px" hide-required-asterisk>
        <div style="display: flex; align-items: center; margin-bottom: 40px;">
          <el-form-item label="转出销售顾问" prop="saleId" >
            <el-select
              v-model="formDataOut.saleId1"
              placeholder="请选择销售顾问"
              @change="selectStudent"
              style="width: 200px;"
            >
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择学生">
            <div>
              <el-checkbox-group v-model="selectedRows" >
                <el-checkbox
                  v-for="member in tableData2"
                  :key="member.studentId"
                  :value="member.studentId"
                  :id="'checkbox-' + member.studentId"
                  style="margin-right: 10px"
                >
                  {{ member.studentName }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="转入销售顾问" prop="saleId" >
            <el-select v-model="formDataOut.saleId" placeholder="请选择销售顾问" style="width: 200px;">
              <el-option
                v-for="item in saleList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <template #footer >
        <div style="display: flex; justify-content: center; padding: 30px;">
             <el-button style="margin-right: 20px;"  @click="operateStudentFlag3 = false" class="cancel">取消</el-button>
            <el-button type="primary" @click="handleConfirmOut" class="confirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import {
    getstudentDataList, getSaleList, getSubjectList,
    toPreStudent,getStudentData,StudentToSole,
    addStudent, deleteStudent, updateStudent
} from '../api/StudentData';
import { ElMessage, ElMessageBox } from 'element-plus'
let studentName = ref("")//学生姓名或电话搜索
let saleId = ref()//销售姓名
let major = ref("")//学校名称
let pageIndex = ref(1)//页码
let pageSize = ref(7)//每页条数
let total = ref(0)//总数
let studentDataList = ref([])//学生数据
let selectedRows = ref([]); //多选删除的数据
let roleId = sessionStorage.getItem('roleId')
//转出
const formDataOut = reactive({
  saleId: '',
  saleId1: '',
})
//转让学生数据
const tableData2 = ref([])
//人员转出下拉框改变
function selectStudent(value) {
  let data = {
    saleId: value,
    pageIndex: 1,
    pageSize: 1000,
  }
  getStudentData('noSignUpList', data).then((res) => {
    if (res.code == 200) {
      tableData2.value = res.dataset.studentList
    }
  })
}
//调取学生数据
let getstudentDataListFun = () => {
    let studentData = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
        studentName: studentName.value,
        saleId: saleId.value,
        major: major.value
    }
    getstudentDataList('noSignUpList', studentData)
        .then(res => {
            if (res.code == 200) {
                studentDataList.value = res.dataset.studentList
                total.value = res.dataset.pageCount * pageSize.value
            }
        })
}
//多选框
let handleSelectionChange = (v) => {
    selectedRows.value = v;
    console.log(selectedRows.value);
}
//删除
let del = (v) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            await deleteStudent('deleteNoSignUp', { studentId: v.studentId }).then((res) => {
                console.log(res);
                if (res.code == 200) {
                }
            })
            getstudentDataListFun()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//点击搜索
let goSearchStudent = () => {
    getstudentDataListFun()
}
//分页器发生变化
let handleCurrentChange = (val) => {
    pageIndex.value = val
    getstudentDataListFun()
}
//每页条数发生变化
let handleChange = (val) => {
    pageSize.value = val
    getstudentDataListFun()
}
//点击详情
let drawerFlag = ref(false)//判断详情抽屉的开关
let studentDetailes = ref(null)//学生信息
let goDetails = row => {
    drawerFlag.value = true
    studentDetailes.value = row
    console.log(studentDetailes.value)
}
let operateStudentFlag = ref(false)//添加/修改学生数据模态框开关
let operateStudentFlag2 = ref(false)//批量转入
let operateStudentFlag3 = ref(false)//转出
let operateType = ref(0)//判断0：添加 1：修改
//点击添加
let goAddStudent = () => {
    operateStudentFlag.value = true
    operateType.value = 0
}
//点击修改
let goModifyStudent = (v) => {
    operateStudentFlag.value = true
    operateType.value = 1
    studentNewsData = v
    console.log(studentNewsData);
}
//转出
let zhuanchu = () => {
    operateStudentFlag3.value=true
}
let myForm = ref("")
let studentNewsData = reactive({
    studentName: "",
    sex: "",
    tel: "",
    major: "",
    saleId: "",
    remarks: "",//备注
    remarks2: "",//新增备注
    preGraduation: "",//预开班
    preDate: "",//预报班
    preCourse: "",//预报学科
    address: "",//家庭住址
    emContact: "",//紧急联系人
    emTel: "",//紧急联系人电话

})
const rules = reactive({

})
//批量删除
let delall = () => {
    if (selectedRows.value.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请先选择要删除的行',
        });
        return;
    }

    ElMessageBox.confirm(
        '确认删除选中的学生吗？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            const deletePromises = selectedRows.value.map((row) =>
                deleteStudent('deleteNoSignUp', { studentId: row.studentId })
            );

            await Promise.all(deletePromises).then((results) => {
                const successCount = results.filter((res) => res.code === 200).length;
                if (successCount === selectedRows.value.length) {
                    ElMessage({
                        type: 'success',
                        message: '批量删除成功',
                    });
                } else {
                    ElMessage({
                        type: 'error',
                        message: '部分删除失败，请检查',
                    });
                }
            });

            getstudentDataListFun(); // 刷新表格数据
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
}
//点击确定 添加未报名学生
let sureOperate = async (formEl) => {
    let data = {
        studentName: studentNewsData.studentName,
        sex: studentNewsData.sex,
        tel: studentNewsData.tel,
        major: studentNewsData.major,
        saleId: studentNewsData.saleId,
        remarks: studentNewsData.remarks,
        preDate: studentNewsData.preDate,
        preGraduation: studentNewsData.preGraduation,
        preCourse: subjectList.value.find(item => item.courseId === studentNewsData.courseId)?.courseName || '',
        emContact: studentNewsData.emContact,
        emTel: studentNewsData.emTel,
        address: studentNewsData.address,
        courseId: studentNewsData.courseId,
    }
    await addStudent('addNoSignUp', data).then((res) => {
        if (res.code == 200) {
            ElMessage({
                message: '添加成功',
                type: 'success',
                duration: 2000,
            })
            operateStudentFlag.value = false;
            getstudentDataListFun()
        } else {
            ElMessage({
                message: '添加失败，请检查手机号是否重复',
                type: 'error',
                duration: 2000,
            })
        }
    })
}
let sureOperate2 = async (formEl) => {
    await updateStudent('updatePreStudent', studentNewsData).then((res) => {
        if (res.code == 200) {
            ElMessage({
                message: '修改成功',
                type: 'success',
                duration: 2000,
            })
            operateStudentFlag.value = false
            getstudentDataListFun()
        } else {
            ElMessage({
                message: '修改失败',
                type: 'error',
                duration: 2000,
            })
        }
    })
}
//调取销售顾问列表
let saleList = ref([])//销售列表
let getSaleListFun = () => {
    getSaleList('saleName', "")
        .then(res => {
            if (res.code == 200) {
                saleList.value = res.dataset
            }
        })
}
//调取学科列表
let subjectList = ref([])//学科列表
let getSubjectListFun = () => {
    getSubjectList('courseList', "")
        .then(res => {
            if (res.code == 200) {
                subjectList.value = res.dataset.courseList
            }
        })
}
//转入
let zhuan = async (v) => {
    operateStudentFlag.value = true
    operateType.value = 3
    studentNewsData = v
    studentNewsData.studentId = v.studentId
}
let sureOperate3 = async (formEl) => {
    let arr = [];
    arr.push(studentNewsData)
    await toPreStudent('toPreStudent', arr).then((res) => {
        if (res.code == 200) {
            ElMessage({
                message: '转入成功',
                type: 'success',
                duration: 2000,
            })
            operateStudentFlag.value = false
            getstudentDataListFun()
        }
    })

}
//批量转入
let zhuan2 = async (v) => {
    if (selectedRows.value.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请勾选要转出的同学',
        });
        return;
    } operateStudentFlag2.value = true
}
let formRefOut=ref('')
//转让学生给别的销售确认按钮
function handleConfirmOut() {
  if (formRefOut.value) {
    formRefOut.value.validate((valid) => {
      if (valid) {
        if (formDataOut.saleId == '' && formDataOut.saleId != '0') {
          ElMessage({
            message: '请选择销售顾问',
            type: 'warning',
          })
          return
        }
        if (selectedRows.value.length === 0) {
          ElMessage({
            message: '请勾选需要转出的学生',
            type: 'warning',
          })
          return
        } else {
          ElMessageBox.confirm('是否确认转出？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              fetchTransferStudent({
                saleId: formDataOut.saleId,
                studentIds: selectedRows.value,
              })
              operateStudentFlag3.value = false
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消转出',
              })
            })
        }
      }
    })
  }
}
//获取销售姓名
function getSaleName(row) {
  let name = ''
  if (row.saleId == '0') {
    return '管理员'
  }
  saleList.value.forEach((item) => {
    if (item.userId == row.saleId) {
      name = item.userName
    }
  })
  return name
}
//转让学生
async function fetchTransferStudent(data) {
  let res = await StudentToSole('toAnotherSale', data)
  if (res.code == 200) {
    ElMessage({
      message: '转让成功',
      type: 'success',
      duration: 2000,
    })
    getstudentDataListFun()
  } else {
    ElMessage({
      message: '转让失败',
      type: 'error',
      duration: 2000,
    })
  }
}

onMounted(() => {
    getstudentDataListFun()
    getSaleListFun()
    getSubjectListFun()
})
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 添加容器定位设置，使模态框相对于此容器定位 */
    position: relative;
    z-index: 1;
    /* 确保容器本身在合理层级 */
}

.el-row {
    width: 90%;
    height: 10%;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 20px;
    margin-top: 20px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    min-height: 71px;
    min-width: 1000px;
}

.row_Left {
    margin-left: 40px;
    display: flex;
    align-items: center;
}

.line {
    width: 2px;
    height: 20px;
    background-color: #007bff;
}

.title {
    padding-left: 10px;
    font-size: 20px;
    margin-right: 20px;
}

:deep(.el-input__wrapper) {
    border-radius: 12px;
}

.search {
    background-color: #0f6ab1;
    color: #fff;
    border: none;
    margin-left: 20px;
    border-radius: 16px;
    padding: 0;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 16px;
}

.row_Right {
    margin-right: 20px;
    display: flex;
    align-items: center;

    img {
        width: 25px;
        height: 25px;
        margin-right: 20px;
    }
}

.content {
    width: 90%;
    margin: 0 auto;
    min-width: 1000px;
    background-color: #fff;
    border-radius: 16px;

    :deep(.cell) {
        text-align: center;
        color: #000
    }

    .myPage {
        margin-top: 50px;
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }
}

.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.el-table.el-table--layout-fixed.is-scrolling-none {
    border-radius: 16px;
}

:deep(.el-drawer) {
    width: 600px !important;
}

:deep(.el-drawer__header) {
    background-color: #0F6AB1;
    margin-bottom: 0px;
    padding-bottom: 20px;
    color: white;
    text-align: center;

    .el-drawer__title {
        font-size: 20px;
    }
}

:deep(.el-overlay) {
    position: absolute;
    top: 0;
    left: 0;
}

:deep(.el-drawer) {
    position: absolute;
    top: 0;
    right: 0;
}

:deep(.el-drawer__body) {
    padding: 0;
}

:deep(.el-drawer__body) {
    background-color: #F0F8FF;
    box-sizing: border-box;
    padding: 20px;

    .text {
        width: 100%;

        div {
            color: black;
            font-size: 15px;
            margin-left: 0px;
            margin-bottom: 20px;
        }

        .nodes {
            height: 310px;
        }
    }

    .el-button {
        background-color: #0f6ab1;
        color: white;
        margin-right: 20px;
        padding: 8px 15px;
    }

    .el-button:hover {
        background-color: #054a80;
    }
    .el-button:active {
        color: #fff;
    }
}
:deep(.el-overlay .el-overlay-dialog) {
    position: absolute;
}
:deep(.el-overlay) {
    position: absolute;
}
:deep(.el-dialog) {
    padding: 0px;
    width: 800px;
    --el-dialog-padding-primary: 0px;
    z-index: 100;
    .el-dialog__header {
        display: inline-block;
        width: 100%;
        background-color: #0f6ab1;
        height: 40px;
        font-size: 15px;
        text-align: center;
        line-height: 40px;
        margin-bottom: 16px;
        .el-dialog__title {
            color: #fff;
        }
    }
    .el-dialog__body {
        display: flex;
        justify-content: center;
        .el-form {
            width: 650px;
            .row {
                width: 100%;
                display: flex;
                align-items: center;
                margin: 0 auto;
                width: 600px;
                height: 50px;
                gap: 20px;
                .el-form-item {
                    width: 48%;
                    height: 100%;
                    margin-bottom: 0px;
                    display: flex;
                    align-items: center;

                    :deep(.el-form-item--label-right .el-form-item__label) {
                        width: 120px;
                    }
                    .el-input,
                    .el-select {
                        width: 200px;
                    }
                    .el-input__wrapper {
                        border-radius: 4px;
                    }
                }
            }
            .rows {
                width: 100%;
                height: 50px;
                margin-top: 10px;
                .el-form-item {
                    width: 86%;
                    height: 50px;
                    display: flex;
                    // align-items: center;
                    .el-input__wrapper {
                        border-radius: 4px;
                    }
                    .el-input {
                        height: 50px;
                    }
                }
            }
            .rowss {
                width: 100%;
                margin-top: 20px;
                .el-form-item__content {
                    justify-content: center;
                    gap: 30px;
                }
            }
        }
    }
}
</style>